<template>
	<view class="uni_box home">
		<!-- <navbar title='课程中心' :yin="true">
			</navbar> -->
		<!-- <u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" /> -->
		<view class="content">
			<Nheader @getmine="getmine" lei="3" @getsou="getsou" :keywords="keywords" backgroundColor="#d6edff"></Nheader>
			<view class="rhview">
				<image class="icon_ss" src="/static/img/icon_ss.png" />
				<u-input v-model="keywords" type="text" :border="false" placeholder="请输入关键词搜索" />
				<text class="soutit" @click="getsou">搜索</text>
			</view>
			<!-- <view class="htwo">
					<u-swiper :list="swlist" height="220"></u-swiper>
				</view> -->

			<!-- <view class="hfour">
					<view class="hfhead">
						<scroll-view class="tuilist" scroll-x>
							<view class="tuiitem" :class="typeinfo.value==item.value?'tactive':''" v-for="(item,index) in type" :key="index" @click="typeClick(item)">
								<text class="tuitit">{{item.name}}</text>
								<image class="xuans" src="/static/img/xuans.png"></image>
							</view>
						</scroll-view>
					</view>
					<view class="wrap">
						<u-row gutter="16">
							<u-col class="zhilist" span="3" v-for="(item,index) in toplist" :key="index" @click="moredetail(item)">
								<view class="zhione">
									<image class="zhidinicon" src="/static/img/img_zd.png" mode=""></image>
									<image class="zhiimg" :src="item.image" mode="aspectFill"></image>
									<view class="zhibot">
										<text class="taobiao txt">{{item.cate_name}}</text>
										<text class="taoname txt">{{item.title}}</text>
									</view>
								</view>
							</u-col>
							
						</u-row>
						<u-row gutter="16" style="margin-top: 40rpx;">
							<u-col class="zhilist" span="4" v-for="(item,index) in list" :key="index"  @click="moredetail(item)">
								<view class="zhione">
									<image class="zhiimg" :src="item.image" mode="aspectFill"></image>
									<view class="zhibot">
										<view class="xm" style="margin-bottom: 6rpx;">
											<text class="xmlei txt">{{ item.cate_name }}</text>
											<text class="xiaoshi" v-if="item.time_text">{{item.time_text}}</text>
										</view>
										<text class="taoname txt">{{item.title}}</text>
									</view>
								</view>
							</u-col>
							
						</u-row>
					</view> -->
			<view class="hfour">
				<view class="wrap chaozhi" v-if="chaotoplist && chaotoplist != ''">
					<view class="zhitou">
						<text class="tui">头条推荐</text>
					</view>
					<u-row gutter="16">
						<u-col class="zhilist" span="4" v-for="(item, index) in chaotoplist" :key="index"
							@click="moredetail(item)">
							<view class="zhione">
								<!-- <image class="zhidinicon" src="/static/img/img_zd.png" mode=""></image> -->
								<image class="zhiimg" :src="item.image" mode="aspectFill"></image>
								<!-- <view class="zhibot">
											<text class="taobiao txt">{{item.cate_name}}</text>
											<text class="taoname txt">{{item.title}}</text>
										</view> -->
							</view>
						</u-col>

					</u-row>
				</view>
				<view class="hfhead">
					<scroll-view class="tuilist" scroll-x>
						<view class="tuiitem" :class="typeinfo.value == item.value ? 'tactive' : ''" v-for="(item, index) in type"
							:key="index" @click="typeClick(item)">
							<text class="tuitit">{{ item.name }}</text>
							<image class="xuans" src="/static/img/xuans.png"></image>
						</view>
					</scroll-view>
				</view>
				<view class="clist">
					<view class="citem" v-for="(item, index) in toplist" :key="index" @click="moredetail(item)">
						<view class="cone">
							<image src="../../static/XDH.png" mode="" class="ctou"></image>
							<text class="xing">{{ item.nickname }}</text>
							<view class="vip" v-if="item.vip != 0">
								<image class="huang" src="/static/img/huang.png"></image>
								<text>VIP</text>
							</view>
							<view class="shiming" v-if="item.is_shiming">
								{{ item.is_shiming }}
							</view>
							<view class="zhidin">
								置顶
							</view>
						</view>
						<view class="ctwo">
							<text>{{ item.title }}</text>
						</view>
						<view class="ctwo">
							<image src="../../static/img/eye.png" mode="" class="eye ml"></image>
							<text>3.9W+</text>
						</view>
					</view>
					<view class="citem" v-for="(item, index) in list" :key="index" @click="moredetail(item)">
						<view class="cone">
							<image src="../../static/XDH.png" mode="" class="ctou"></image>
							<text class="xing">{{ item.nickname }}</text>
							<view class="vip" v-if="item.vip != 0">
								<image class="huang" src="/static/img/huang.png"></image>
								<text>VIP</text>
							</view>
							<view class="shiming" v-if="item.is_shiming">
								{{ item.is_shiming }}
							</view>
							<!-- <view class="zhidin">
										置顶
									</view> -->
						</view>
						<view class="ctwo">
							<text>{{ item.title }}</text>
						</view>
						<view class="ctwo">
							<image src="../../static/img/eye.png" mode="" class="eye ml"></image>
							<text>3.9W+</text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 广告弹窗 -->
		<YanPop :yanshow="yanshow" :taninfo="taninfo" @yanclose="yanshow=false"></YanPop>
</view>
</template>

<script>
import YanPop from '@/components/YanPop/YanPop.vue'
export default {
	components: {
		YanPop
	},
	data() {
		return {
			mshow: false,
			homeinfo: {

			},
			iseyes: false,
			token: uni.getStorageSync('token'),
			indicatorDots: true,
			autoplay: false,
			interval: 2000,
			duration: 500,

			status: 'loadmore',
			iconType: 'flower',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了'
			},
			swlist: [
				// {
				// 	image: '/static/img/xmfabu.png'
				// },
				// {
				// 	image: '/static/img/xmfabu.png'
				// },
			],
			hList: [
				{ id: 1, name: '测试站位', img: '/static/img/cone.png' },
				{ id: 2, name: '测试站位', img: '/static/img/ctwo.png' },
				{ id: 3, name: '测试站位', img: '/static/img/cthree.png' },
				{ id: 4, name: '测试站位', img: '/static/img/cfour.png' },
			],
			moreshow: false,
			newinfo: [],
			nlist: [
				'寒雨连江夜入吴',
				'平明送客楚山孤',
				'洛阳亲友如相问',
				'一片冰心在玉壶'
			],
			lamp: [
				'寒雨连江夜入吴',
				'平明送客楚山孤',
				'洛阳亲友如相问',
				'一片冰心在玉壶'
			],
			keywords: '',
			type: [],
			typeinfo: {},
			list: [],
			page: 1,
			limit: 10,
			last_page: 1,
			status: "loadmore",
			toplist: [],
			chaotoplist: [],
			yanshow:false,
			taninfo:{}
		}
	},
	onLoad() {
		this.getinit()
		this.gettan();//弹窗配置
		// this.getconfig();//公共配置
	},
	onShow() {
		this.getzhidin()
		this.getchaozhidin()
	},
	onPullDownRefresh() {
		// console.log("+++")
		// // uni.stopPullDownRefresh();
		// this.getstatistic();//用户资产
		// setTimeout(() => {
		// 	uni.stopPullDownRefresh();
		// }, 1000);
	},
	onReachBottom: function () {
		this.loadmore();
	},
	methods: {
		async gettan(){
			let res = await this.$u.api.getTanQuan({
			});
			this.taninfo = res
			if(res.status == 1){
				//弹出首页
				this.yanshow = true
			}
		},
		getinit() {
			this.getbanner();//banner
			// this.getnotice();//公告
			// this.fgetMenu();//菜单
			this.fgetListParams();//项目参数

		},
		async getbanner() {
			let res = await this.$u.api.quangetBanner({
				mark: 'h5-quan'
			});
			// console.log(res)
			this.banner = res
			let swlist = res
			for (let i in swlist) {
				swlist[i].image = swlist[i].imageurl
			}
			this.swlist = swlist

		},
		async getzhidin() {
			let res = await this.$u.api.quangetTopList({
			});
			this.toplist = res
		},
		async getchaozhidin() {
			let res = await this.$u.api.getSubTop({
			});
			this.chaotoplist = res
		},

		getgong() {
			this.navrouter("/pages/TPage/Gonglist");
		},
		getmine() {
			this.mshow = true
			uni.hideTabBar();
		},
		mineclose() {
			this.mshow = false
			uni.showTabBar();
		},
		geteyes() {
			this.iseyes = !this.iseyes
		},
		chainrecharge() {
			this.navrouter("/pages/TPage/Chongbi");
		},
		getlogin() {
			uni.redirectTo({
				url: '/pages/login/login'
			})
		},
		getinvite() {
			this.navrouter("/pages/TPage/Yaoqing?type=home");
		},
		getClear() {
			this.list = []
			this.page = 1,
				this.status = "loadmore"
			this.getList()
		},
		getsou(e) {
			// this.keywords = e
			this.getClear()

		},
		loadmore() {
			let page = this.page;
			if (this.status == 'loadmore') {
				this.page++;
				this.getList();
			}
		},
		async fgetListParams() {
			let res = await this.$u.api.quangetListParams({
			});
			// console.log(res)
			// this.order = res.order
			// if(res.order){
			// 	this.orderinfo = this.order[0]
			// }
			this.type = res.type
			if (res.type) {
				this.typeinfo = this.type[0]
			}
			this.getClear()
		},
		async getList() {//列表数据
			let res = await this.$u.api.quangetListPage({
				// limit:this.limit,
				page: this.page,
				type: this.typeinfo.value,
				keywords: this.keywords,
			});
			console.log(res)
			// this.uinfo = res
			this.last_page = res.lastpage;
			let list = res.list;
			this.list = this.page == 1 ? list : [...this.list, ...list];
			if (this.page >= this.last_page) {
				this.status = 'nomore';
			}

		},
		typeClick(item) {
			this.typeinfo = item
			this.getClear()
		},
		moredetail(item) {
			this.navrouter("/pages_subject/twoPage/Detailtwo?id=" + item.id + '&leitype=2');
		},
		tishi() {
			this.$u.toast("请到悬赏主页面进行操作");
		}


	}
}
</script>

<style lang="scss" scoped>
page {
	// background-color: #fff;
	background: linear-gradient(rgb(214, 237, 255), rgb(254, 246, 248));
}

.content {
	// background-color: #fff;
	background: linear-gradient(rgb(214, 237, 255), rgb(254, 246, 248));
	padding-bottom: 130rpx;
	min-height: 100vh;

	.asset {
		margin: 50rpx 45rpx;

		.Total-assets {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 16rpx;

			.zileft {
				display: flex;
				flex-direction: column;

				.zione {
					display: flex;
					flex-direction: row;
					align-items: center;

					.zname {
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 30rpx;
						color: #111111;
						display: inline-block;
						margin-right: 15rpx;
					}

					.yan {
						width: 44rpx;
						height: 30rpx;
					}
				}

				.zinum {
					margin-top: 43rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 50rpx;
					color: #111111;
				}
			}

			.tu {
				margin-left: auto;
				width: 173rpx;
				height: 149rpx;
			}
		}

		.lian {
			height: 80rpx;
			background: #030000;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: 60rpx 0 53rpx;
		}
	}

	.htwo {
		padding: 20rpx 30rpx 0;

		/deep/.u-indicator-item-round-active {
			// width: 17px;
			background-color: rgba(89, 255, 246, 1);
		}
	}

	.hthree {
		margin: 40rpx 30rpx 0;

		.hlist {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.hitem {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 25%;
				margin-bottom: 40rpx;

				.hicon {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 8rpx;
				}

				text {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}

	.gongview {
		margin: 30rpx 30rpx 0;
		background: #F5F5F5;
		border-radius: 5rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: row;

		.gongicon {
			width: 40rpx;
			height: 40rpx;

		}

		.gxian {
			width: 1rpx;
			height: 20rpx;
			background: #CCCCCC;
			display: inline-block;
			margin: 0 20rpx;
		}

		.gongcont {
			flex: 1;
			display: flex;
			width: 70%;

			/deep/.u-notice-bar {
				padding: 0 !important;
			}
		}
	}

	.refu {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 40rpx;

		.remen {
			margin-right: 4rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.htit {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
		display: block;

	}

	.hfour {
		padding: 0 0rpx;

		// margin-top: 20rpx;
		.hfhead {
			display: flex;
			flex-direction: column;
			// align-items: center;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			padding: 20rpx 30rpx;

			.tuilist {
				white-space: nowrap;

				.tuiitem {
					display: inline-block;
					position: relative;
					padding: 18rpx 0;
					margin-right: 60rpx;

					.tuitit {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}

					.xuans {
						width: 100%;
						height: 15rpx;
						position: absolute;
						left: 0%;
						bottom: 0;
						display: none;
					}
				}

				.tactive {
					.tuitit {
						background: linear-gradient(-82deg, #4BB6F0 0%, #1D8DFD 98.53515625%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;

					}

					.xuans {
						display: inline-block;
					}
				}
			}

			.tuishai {
				display: flex;
				flex-direction: row;
				margin-top: 20rpx;
				align-items: center;

				.shai {
					padding: 15rpx 20rpx;
					margin-right: 20rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #51565D;
				}

				.sactive {
					background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
					color: #fff;
				}

				.shaiview {
					margin-left: auto;
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 0;

					.icon_sx {
						margin-left: 12rpx;
						width: 12rpx;
						height: 12rpx;
					}
				}
			}

			.htittwo {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #111111;
				display: inline-block;

			}

			.gengview {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: auto;

				.geng {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #999999;
				}

				.icon_next {
					margin-left: 4rpx;
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.jiulist {
			.jiuitem {
				padding: 30rpx;
				display: flex;
				flex-direction: row;
				border-bottom: 1rpx solid #EEEEEE;
				;

				// align-items: center;
				.hebg {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.jiuright {
					display: flex;
					flex-direction: column;
					flex: 1;

					.jname {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 31rpx;
						color: #000000;

					}

					.pjia {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FF4545;
						display: block;
						margin-top: auto;
					}

					.pnum {
						font-size: 35rpx;
					}

					.bqian {
						margin-top: 16rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
					}

					.shijie {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 18rpx;
						color: #909AAB;
						display: inline-block;
						margin-right: 10rpx;
					}

					.qian {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin: 15rpx;

						.qianjiu {
							padding: 9rpx 12rpx;
							background: #EEEEEE;
							border-radius: 4rpx;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #51565D;
						}
					}

					.zhiview {
						margin-top: auto;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.zhione {
							padding: 15rpx 25rpx;
							// background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
							border-radius: 12rpx;
							border: 1px solid #46B2F2;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #46B2F2;
							margin-left: 20rpx;
						}

						.din {
							background: linear-gradient(-82deg, #4BB6F0, #1D8DFD);
							border: none;
							color: #fff;
						}
					}

					.yanview {
						display: flex;
						margin-top: auto;
						flex-direction: row;
						align-items: center;

						.yantime {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

						.icon_eye_s {
							margin-left: auto;
							margin-right: 9rpx;
							width: 28rpx;
							height: 28rpx;
						}

						.yuenum {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

					}
				}
			}
		}
	}
}

// 新修改样式
.wrap {
	margin: 20rpx 0;
	padding: 0 20rpx;

	.zhilist {
		margin-bottom: 8rpx;
	}

	.zhione {
		// height: 196rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 4rpx solid #087BE7;

		.zhiimg {
			width: 100%;
			height: 110rpx;
			border-radius: 10rpx 10rpx 0 0;
		}

		.zhidinicon {
			position: absolute;
			width: 64rpx;
			height: 60rpx;
			right: 0;
			top: 0;
			z-index: 1;
		}

		.zhibot {
			padding: 5rpx 8rpx;

			.xm {
				display: flex;
				flex-direction: row;
				align-items: center;

				.xmlei {
					font-weight: 500;
					font-size: 20rpx;
					color: #46B1F2;
					display: block;
					max-width: 70%;
				}

				.xiaoshi {
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
					display: inline-block;
					margin-left: 8rpx;
				}

			}

			.taoname {
				display: block;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				margin-top: 3rpx;
			}

			.taobiao {
				font-weight: 500;
				font-size: 20rpx;
				color: #46B1F2;
				display: block;
			}

			.taomiao {
				font-weight: 500;
				font-size: 20rpx;
				color: #909AAB;
				display: block;
				margin-top: 3rpx;
			}
		}
	}
}

.chaozhi {
	background-color: #fff;
	padding: 20rpx 20rpx 10rpx;
	margin: 20rpx 30rpx 0;
	border-radius: 20rpx;

	.zhitou {
		display: flex;
		flex-direction: row;
		align-items: center;

		.tui {
			color: #333;
			font-weight: 500;
			font-size: 30rpx;
			display: block;
			margin-bottom: 10rpx;
		}
	}

	.zhione {
		border: none;

		.zhiimg {
			height: 120rpx;
		}
	}
}

.clist {

	.citem {
		margin: 20rpx 30rpx 30rpx;
		background-color: #fff;
		padding: 30rpx 30rpx 20rpx;
		border-radius: 20rpx;

		.cone {
			display: flex;
			flex-direction: row;
			align-items: center;

			.ctou {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}

			.xing {
				color: #333;
				font-size: 28rpx;
				font-weight: 500;
				max-width: 200rpx;
				display: inline-block;
			}

			.shiming {
				margin-left: 20rpx;
				border: 1rpx solid #ddd;
				color: #333;
				padding: 3rpx 15rpx;
				border-radius: 10rpx;

			}

			.vip {
				position: relative;
				padding: 2rpx 15rpx;
				background: linear-gradient(90deg, #FFEBC0, #FFC479);
				border-radius: 11rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;

				.huang {
					position: relative;
					width: 38rpx;
					height: 35rpx;
					// left: 5rpx;
					top: -4rpx;

				}

				text {
					font-weight: 500;
					font-size: 25rpx;
					position: relative;
					// left: 6px;
					margin-left: 4rpx;
					color: #6C2A09;
				}

			}

			.zhidin {
				margin-left: auto;
				border-radius: 20rpx 0 20rpx 0;
				background-color: red;
				color: #fff;
				font-size: 28rpx;
				font-weight: normal;
				padding: 4rpx 20rpx;
			}

		}

		.ctwo {
			color: #333;
			font-weight: 500;
			font-size: 32rpx;
			display: block;
			margin: 20rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;

			.ml {
				margin-left: auto;
			}

			.eye {
				width: 40rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}
	}
}

.u-row {}

.demo-layout {
	height: 80rpx;
	border-radius: 8rpx;
}

.bg-purple {
	background: #d3dce6;
}

.bg-purple-light {
	background: #e5e9f2;
}

.bg-purple-dark {
	background: #99a9bf;
}

.rhview {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 90rpx;
	padding: 0 20rpx;
	// background: #F3F4F6;
	background: #fff;
	border-radius: 16rpx;
	flex: 1;
	margin: 0 30rpx;

	// margin-left: 20rpx;
	.icon_ss {
		width: 40rpx;
		height: 40rpx;
		margin-right: 18rpx;
	}
}</style>
